<template>
  <div>
    <div class="view flex-row align-center p-l-30">
        <img :src="`${require('@/assets/imgs/Vector.png')}`" style="width:21px;height:17px;margin-right:5px;"/>
        <div style="color:#FE974F;font-size:14px;">创始款（{{total}})</div>
    </div>

    <mescroll-vue v-if="list.length > 0" class="mescroll1" ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
        <div class="view flex-row flex-wrap " style="margin-right:-15px;padding-left:15px;padding-right:15px;">

            <div style="width:calc(100% / 2 - 40px);background-color:#24232D;padding-top: 15px;padding-bottom: 15px;border-radius: 10px;position: relative;" class="p-l-12 p-r-12 view align-center m-r-15 m-b-35 " v-for="(item,index) in list" :key="index">
                <div class="inset-img" v-if="item.expire > 0">
                    <img :src="require('@/assets/imgs/asfasf.png')" class="width100 height100"/>
                    <span class="c-333 fz-12" style="left: 5px;
                    display: flex;position: absolute;
                        left: 5px;">
                                倒数:
                                    <!-- cooling_time -->
                        <van-count-down  :time="(item.expire ) + 5000" format="HH:mm:ss" @finish="resetStatus(index)"/></span>
                </div>
                
                <div style="border-radius: 15px;" class="m-b-15">
                    <van-image
                    class="width100 height100"
                    fit="cover"
                    radius="5"
                    @click="prevImg(item.image)"
                    :src="item.image"
                    v-if="item.image"
                    />
                    <img v-else class="width100 height100" :src="require('@/assets/imgs/asfas.png')"/>
                </div>

                <div>
                    <div style="color: #fff;min-height:34px;" class="fz-14 m-b-12">{{ item.name }}</div>
                </div>

                <div class="view flex-row align-end  justify-between width100">
                    <van-button style="background-color:transparent;" class="width100" plain round color="#D7C19A" size="small"  @click="showMake(item)" :disabled="item.disabled != 0">制作铸造力NFT</van-button>
                </div>
            </div>

        </div>
    </mescroll-vue>
    <van-empty
        v-else
        class="custom-image"
        image="https://taiyuanpower.oss-cn-hangzhou.aliyuncs.com/wxapp/x/2412341234.png"
        />
  </div>
</template>

<script>
import { getMyNftListByOriginNft, zMake } from '@/api/index'
import MescrollVue from 'mescroll.js/mescroll.vue'
export default {
    components:{
      MescrollVue // 注册mescroll组件
  },
  data: function () {
        return {
            active: 0,
            pageLoading:false,
            activeNames: ['1'],
            total: 0,
            list: [],
            state: 1,
            queryForm: {
                pages: 1,
                limit: 16
            },
            mescroll: null, // mescroll实例对象
            mescrollDown: {
                callback: this.upCallback,
                
                auto: false
            }, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
            mescrollUp: { // 上拉加载的配置.
                 callback: this.dowmCallback,
                 auto: false   
            }
        }
  },
  methods: {
    
    showMake(data) {
        if (data.disabled != 0) {
            return this.$toast({
                message: '未到达铸造时间~'
            })
        }
        this.$emit('showAmake', data)
    },
    mescrollInit (mescroll) {
        this.mescroll = mescroll  // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
    },
    prevImg(img) {
        this.$emit('showImgs', img)
    },
    async upCallback() {
        this.pageLoading = true
        this.queryForm.pages = 1
        await this.getOriginNFTList()
        this.$nextTick(() => {
            this.mescroll.endSuccess()
            this.pageLoading = false
        })
    },
    resetStatus(i) {
        let data = {...this.list[i]}
        data.disabled = 0
        data.expire = 0
        this.$set(this.list, i,  data)
    },
    dowmCallback(page) {
        this.queryForm.pages = page.num
        this.getOriginNFTList()
    },
    
    async getOriginNFTList() {
        const res = await getMyNftListByOriginNft(this.queryForm)
        if (this.queryForm.pages == 1) {
            this.list = res.data.list
        } else {
            this.list = [...this.list, ...res.data.list]
        }
        this.total = res.data.total
        this.mescroll.endSuccess(this.list.length, res.data.total)
    },
  }
  
}
</script>

<style scoped>
.mescroll1 {
    max-height: calc(100vh - 305px);
    padding-top: 30px;
    overflow-y: auto;
    overflow-x: hidden;
}
.box-line {border: 1px solid #D7C19A;padding: 5px;margin-bottom: 20px;}
.view {display: flex;flex-direction: column;}
.height100 {height: 100%;}
.width100 {width: 100%;}
.flex-row {flex-direction: row;}
.flex-1 {flex: 1;}
.flex-2 {flex:2;}
.flex-1-50 {flex: 0 0 50%;}
.flex-wrap {flex-wrap: wrap;}
.text-center {text-align: center;}
.text-right {text-align: right;}
.text-left {text-align: left;}
.justify-start{justify-content:flex-start;}
.justify-end{justify-content:flex-end;}
.justify-center {justify-content:center;}
.ovhidden {overflow: hidden;}
.justify-between {justify-content:space-between;}
.justify-around {justify-content:space-around;}
.align-start {align-items:flex-start;}
.align-end {align-items:flex-end;}
.align-center {align-items:center;}
.align-stretch {align-items:stretch;}
.c-333 {color: #333;}
.fz-20 {font-size: 30px;}
.c-663 {color: #66625C;}
.c-d7c {color: #D7C19A;}
.fz-12 {font-size: 12px;}
.fz-14 {font-size: 14px;}
.fz-18 {font-size: 18px;}
.c-fff {color: #fff;}
.width100 {width: 100%;}
.p-l-24 {padding-left: 24px;}
.p-r-24 {padding-right: 24px;}
.p-t-16 {padding-top: 16px;}
.m-b-36 {margin-bottom: 36px;}
.b-r-radius-20 {border-radius: 20px;}
.bg-242 {background-color: #24232D;}
.m-b-30 {margin-bottom: 30px;}
.p-l-30 {padding-left: 30px;}
.p-r-30 {padding-right: 30px;}
.p-t-20 {padding-top: 20px;}
.p-b-20 {padding-bottom: 20px;}
.p-r-20 {padding-right: 20px;}
.p-l-20 {padding-left: 20px;}
.bold {font-weight: bold;}
.c-070 {color: #707070;}
.m-r-20 {margin-right: 20px;}
.m-b-5 {margin-bottom: 5px;}
.van-tabbar {background: #19181F;}
.van-tabbar-item {background: #19181F;}
[class*=van-hairline]::after {content: none !important;}
.van-collapse-item__title {
    background: transparent;
    border: 1px solid #D7C19A;
    border-radius: 20px;
    color: #FE974F;
}
.m-b-35 {margin-bottom: 25px;}
.m-b-15 {margin-bottom: 15px;}
.m-r-15 {margin-right: 15px;}
.p-l-12 {padding-left: 12px;}
.p-r-12 {padding-right: 12px;}
.m-b-12 {margin-bottom: 12px;}
.p-l-15 {padding-left: 15px;}
.p-r-15 {padding-right: 15px;}
.m-b-20 {margin-bottom: 10px;}
.van-cell--clickable:active {background-color: transparent;}
.van-collapse-item__content {background-color: transparent;padding: 12px 0;}
.van-collapse-item {margin-bottom: 15px;}
.inset-img {height: 25px;
    left: 0;
    top: -9px;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
}
</style>
